<!-- 对齐图标集 -->
<template>
    <div class="si-align">
        <template v-for="(item, index) in list">
            <el-tooltip effect="dark" :content="item.label" placement="bottom" :show-after="300">
                <el-icon @click="onSetAlign(item.value)">
                    <icon-align-left v-if="item.value === 'left'" />
                    <icon-align-vertical v-if="item.value === 'vertical'" />
                    <icon-align-right v-if="item.value === 'right'" />
                    <icon-align-top v-if="item.value === 'top'" />
                    <icon-align-horizontal v-if="item.value === 'horizontal'" />
                    <icon-align-bottom v-if="item.value === 'bottom'" />
                    <icon-horizontal-equidistant v-if="item.value === 'horizontalEquidistant'" />
                    <icon-vertical-equidistant v-if="item.value === 'verticalEquidistant'" />
                </el-icon>
            </el-tooltip>
        </template>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'SiAlign',
    props: {
        type: {
            type: Array,
            default: () => ([])
        }
    },
    emits: ['click'],
    setup(props, { emit }) {
        const { type } = toRefs(props)

        const list = computed(() => {
            return [
                { label: '左对齐', value: 'left' },
                { label: '水平居中对齐', value: 'vertical' },
                { label: '右对齐', value: 'right' },
                { label: '顶对齐', value: 'top' },
                { label: '垂直居中对齐', value: 'horizontal' },
                { label: '底对齐', value: 'bottom' },
                { label: '水平等间距分布', value: 'horizontalEquidistant' },
                { label: '垂直等间距分布', value: 'verticalEquidistant' }
            ].filter(item => type.value.includes(item.value))
        })

        const onSetAlign = name => {
            emit('click', name)
        }

        return {
            list,
            onSetAlign
        }
    }
})
</script>

<style lang="less" scoped>
.si-align {
    .el-icon {
        padding: 8px;
        border-radius: 4px;
        margin-right: 5px;
        cursor: pointer;
        &:hover {
            background-color: var(--edit-custome-background-color);
        }
    }
}
</style>